import React, { useEffect, useState } from 'react'
import './style.scss'
import { deleteUserRequest, reviseUserRequest } from '@/apis/user'
import { Button, Form, Image, Input, InputNumber, Modal, Popconfirm, Radio, Table, TablePaginationConfig, message } from 'antd'

import Upload from '@/components/upload'
import { passwordRule, phoneRule, usernameRule } from '@/utils/formRules';
import { ChangeEvent } from 'react'
import { layout } from '@/utils/contants'
import { userTypes } from '@/store/user'
import { storeAll } from '@/store'
import { observer } from 'mobx-react-lite'

const { Column } = Table
const { Search } = Input;
const UserManager: React.FC = () => {
	const [users1, setUsers1] = useState<userTypes[]>([])//根据这个来搜索
	const [currentUser, setCurrentUser] = useState<userTypes>();
	const [open, setOpen] = useState<boolean>(false);
	const [searchUser, setSearchUser] = useState<string>('');
	const [avater, setAvater] = useState<string>('');
	const [form] = Form.useForm()
	const { usersStore: { users, getUsers } } = storeAll
	const pagination: TablePaginationConfig = {
		defaultCurrent: 1,
		pageSize: 5,
		total: users1.length || 0
	}

	useEffect(() => {
		setUsers1(users)
	}, [users])

	const getImgUrl = (url: string) => {
		setAvater(url)
	}

	const closeModal = () => {
		form.resetFields();
		setOpen(false)
	}

	const opneModal = (record: userTypes) => {
		setOpen(true);
		form.setFieldsValue(record)
		setCurrentUser(record);
		setAvater(record.avater);
	}

	//删除用户
	const deleteUser = (user: userTypes) => {
		deleteUserRequest(user.id).then((res: any) => {
			message.success(res.message)
			getUsers()
		})
	}

	//修改用户
	const reviserUser = (user: any) => {
		user.avater = currentUser?.avater
		user.id = currentUser?.id
		user.avater = avater
		reviseUserRequest(user).then((res: any) => {
			message.success(res.message)
			closeModal()
			getUsers()
		})
	}

	const onChange = (e: ChangeEvent<HTMLInputElement>) => {
		setSearchUser(e.target.value)
	}

	const onSearch = () => {
		setUsers1(() => {
			return users.filter(item => item.username.indexOf(searchUser) !== -1)
		})
	}

	return <div className="userManagerWrap">
		<Search placeholder="根据用户名搜索用户" value={searchUser} onChange={onChange} onSearch={onSearch} enterButton className="userManagerSearch" />
		<Table dataSource={users1} pagination={pagination}>
			<Column title="username" dataIndex="username" key="username"></Column>
			<Column title="password" dataIndex="password" key="password"></Column>
			<Column title="phone" dataIndex="phone" key="phone"></Column>
			<Column title="name" dataIndex="name" key="name"></Column>
			<Column title="sex" dataIndex="sex" key="sex"
				render={(sex: number) => sex === 1 ? '男' : '女'}
			></Column>
			<Column title="age" dataIndex="age" key="age"></Column>
			<Column
				title="avater" dataIndex="avater" key="avater"
				render={(avater: string) => <Image className="tableAvater" src={avater} alt=""></Image>}
			></Column>
			<Column title="操作" render={(_: any, record: userTypes) => <div className="actionWrap">
				<Button type="primary" danger>
					<Popconfirm
						title="Delete the task"
						description="你确定要删除此用户吗，删除后用户的所有信息都会被抹去"
						okText="确定"
						cancelText="取消"
						onConfirm={() => deleteUser(record)}
					>
						删除
					</Popconfirm>
				</Button>
				<Button type="primary" onClick={() => { opneModal(record) }}>
					修改
				</Button>
			</div>}></Column>
		</Table>
		<Modal title="修改用户" open={open} onOk={reviserUser} onCancel={closeModal} footer={null}>
			<Form
				initialValues={currentUser}
				onFinish={reviserUser}
				form={form}
				{...layout}
			>
				<Form.Item name={['username']} label="用户名" rules={[usernameRule]}>
					<Input />
				</Form.Item>
				<Form.Item name={['password']} label="密码" rules={[passwordRule]}>
					<Input.Password />
				</Form.Item>
				<Form.Item name={['name']} label="姓名">
					<Input />
				</Form.Item>
				<Form.Item name={['phone']} label="电话" rules={[phoneRule]}>
					<Input />
				</Form.Item>
				<Form.Item name={['sex']} label="性别">
					<Radio.Group>
						<Radio value={0}>女</Radio>
						<Radio value={1}>男</Radio>
					</Radio.Group>
				</Form.Item>
				<Form.Item name={['age']} label="年龄" rules={[{ required: true, message: '请输入年龄' }]}>
					<InputNumber min={18} max={60} />
				</Form.Item>
				<Form.Item label="头像">
					<Upload getImgUrl={getImgUrl} src={avater}></Upload>
				</Form.Item>
				<Form.Item wrapperCol={{ ...layout.wrapperCol, offset: 8 }}>
					<Button type="primary" htmlType="submit">
						修改
					</Button>
				</Form.Item>
			</Form>
		</Modal>
	</div>
}

export default observer(UserManager)
